<template>
  <!--  后端判断-->
  <div>
    <!--      头像、昵称，根据接受者id参数是否为-1判断加不加”回复 xxx“-->
    <UserHead :sender="comment.sender" :date="comment.date" :receiver="comment.receiver">
      <template v-if="comment.sender.id!=uid" v-slot:reply>
        <!--        向后端发送请求，请求添加一个comment，参数文章id、所回复的评论的id、发送人id（session中取）、接受人id（即所点击评论的发送者）-->
        <el-button @click="selectOne()">
          回复
        </el-button>
      </template>
    </UserHead>
    <!--      评论内容-->
    <p style="margin-left: 1%">{{ comment.comment }}</p>
    <CommentBottom v-if="comment.id!=null" :uid="uid" :comment="comment"></CommentBottom>
    <!--    评论输入框及按钮-->
    <CommentReply :receiver-id="comment.sender.id" :article-id="comment.articleId" :comment-id="comment.id" :senderId="uid"
                  v-if="selectCommentId!=-1"></CommentReply>
  </div>
</template>

<script>
import UserHead from '../user/UserHead'
import CommentBottom from './CommentBottom'
import CommentReply from './CommentReply'

export default {
  name: 'Comment',
  components: {CommentReply, CommentBottom, UserHead},
  props: ['comment', 'articleId', 'uid'],
  data () {
    return {
      selectCommentId: -1
    }
  },
  methods: {
    selectOne: function () {
      if (this.comment) {
        this.selectCommentId = this.comment.id
      }
    }
  }
}
</script>

<style scoped>

</style>
